<template>
<div class="main">
<div class="Breadcrumb">
   
</div>

<div class="mainImg" style="text-align:center">
    <img src="https://chst.vip/avatar/headimgurl-1657603631095.webp" alt="" width="200" height="200">
</div>


  <el-descriptions class="margin-top" title="我的中心" :column="2"  border>
    <template slot="extra">
      <el-button type="primary">操作</el-button>
    </template>

    <el-descriptions-item label="unid">{{userInfo.unid}}</el-descriptions-item>

    <el-descriptions-item label="账号">{{userInfo.username}}</el-descriptions-item>

    <el-descriptions-item label="vip等级">{{userInfo.vipLevel}}</el-descriptions-item>

    <el-descriptions-item label="vip到期时间">
    <el-tag  effect="dark">{{userInfo.vipExpires}}</el-tag>
    </el-descriptions-item>

    <el-descriptions-item label="昵称"> <el-tag  effect="dark">{{userInfo.nickname}}</el-tag></el-descriptions-item>

    <el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>

    <el-descriptions-item label="角色名称">{{userInfo.roleName}}</el-descriptions-item>

    <el-descriptions-item label="性别"><el-tag>{{userInfo.sex==1?"男":"女"}}</el-tag></el-descriptions-item>

    <el-descriptions-item label="备份">{{userInfo.province}}</el-descriptions-item>

    <el-descriptions-item label="城市">{{userInfo.city}}</el-descriptions-item>


  </el-descriptions>

  </div>
</template>

<script>
  import { mapState } from "vuex";
  export default {
    meta:{
        title:'wdzx',
        name:'我的中心',
        icon:'iconfont icon-wode'
    },
    computed: {
      ...mapState("users", ["userInfo"]),
    },
  }
</script>
<style lang="less" scoped>
#app{
        .layout-container{
            .el-container{
                .is-vertical{
                    .el-main{
                        .main{
                            line-height: 14px;
                            font-size: 14px;
                            text-align: left;
                            .Breadcrumb{
                                margin: 20px 0 30px 0;
                            .Breadcrumb__item:nth-of-type(1){
                                font-weight: 900;
                            }
                            .Breadcrumb__item:nth-of-type(1):active{
                                  color:skyblue
                                }
                            .Breadcrumb__item:nth-of-type(1):hover{
                                  cursor: pointer;
                                  color:skyblue
                                }
                            }
                        }
                    }
                }
            }
        }
}

</style>